<template>
	<div class="bmcVrHall">
		<div class="banner">
			<h1>VR共享展厅，黑科技来袭</h1>
			<p>虚拟现实，人机交互，穿越想象空间，浸入虚拟视界</p>
		</div>
		<div class="container1">
			<div class="title">斑马仓VR共享展厅</div>
			<p>自由设计，简单操作，仅需5平米，斑马仓的合伙人即可在当地运营中心将设计、体验及主材统统展现。一键VR体验，身临其境未来家；</p>
			<p>一键全景图发送，客户留存提升，增加客户粘性，增强客户体验。</p>
			<div class="item">
				<img src="./img/product_bmcrogram_mode1@3x.png" alt="">
				<div class="info">
					<h2>VR虚拟现实</h2>
					<span class="gang"></span>
					<span><icon type="success-no-circle"></icon>沉浸式VR体验</span>
					<span><icon type="success-no-circle"></icon>丰富的案例库，商品库</span>
					<span><icon type="success-no-circle"></icon>智能化个性化的导购，情景式营销</span>
				</div>
			</div>
			<div class="item">
				<img src="./img/product_vrprogram_mode2@3x.jpg" alt="">
				<div class="info">
					<h2>人脸识别</h2>
					<span class="gang"></span>
					<span><icon type="success-no-circle"></icon>准确识别、抓取到客户的人脸信息</span>
					<span><icon type="success-no-circle"></icon>分析出客户的年龄，性别和性格特征</span>
					<span><icon type="success-no-circle"></icon>智能推送商品</span>
				</div>
			</div>
			<div class="item">
				<img src="./img/product_vrprogram_mode3@3x.jpg" alt="">
				<div class="info">
					<h2>智能管理</h2>
					<span class="gang"></span>
					<span><icon type="success-no-circle"></icon>客户信息留存维护</span>
					<span><icon type="success-no-circle"></icon>构建商品智能导购场景</span>
				</div>
			</div>
		</div>
	</div>
	
</template>

<script>
	import { Icon } from 'vux';
	export default {
		name: 'bmcVrHall',
		data(){
			return {

			}
		},
		components: {
			Icon
		}
	}
</script>

<style lang="stylus" scoped>
	.bmcVrHall{
		width: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.banner{
			width: 100%;
			height: 5rem;
			background: url('./img/product_bmc_banner@3x.jpg') no-repeat;
			background-size: 100% 100%; 
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			h1{
				font-size: 0.36rem;
				color: #FFFFFF;
				margin: 0.5rem 0; 
			}
			p{
				width: 54.8%;
				text-align: center;
				color: rgba(255,255,255,0.8);
				font-size: 0.24rem;
				line-height: 0.36rem;
			}
		}
		.container1{
			width: 100%;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #F3F6FB;
			.title{
				font-size: 0.36rem;
				color: #333333;
				margin: 0.5rem 0;
			}
			p{
				width: 88%;
				font-size: 0.3rem;
				color: rgba(102,102,102,0.8);
				line-height: 0.5rem;
				&:nth-of-type(2){
					margin-bottom: 0.5rem;
				}
			}
			.item{
				width: 92%;
				overflow: hidden;
				background: #fff;
				display: flex;
				flex-direction: column;
				margin-bottom: 0.4rem;
				img{
					width: 100%;
					height: 3.8rem;
					margin-bottom: 0.5rem;
				}
				.info{
					width: 82%;
					margin: 0 5%;
					h2{
						font-size: 0.36rem;
						color: #333;
					}
					.gang{
						display: block;
						width: 0.2rem;
						height: 0.04rem;
						background: #333;
						margin: 0.4rem 0 0.4rem 0.1rem;
					}
					span{
						display: flex;
						flex-direction: row;
						align-items: center;
						font-size: 0.3rem;
						color: #666;
						margin-bottom: 0.4rem;
						i{
							font-size: 0.3rem;
							color: #ccc;
							margin-right: 0.1rem;
						}
					}
				}
			}
		}
	}
</style>

